<template>
	<el-dialog title="监控实时视频" v-model="visible" :close-on-click-modal="false" width="640" draggable :loading="loading" @closed="handleClose">
		<div class="w-[600px] h-[440px]">
			<EZUIKitPlayer ref="EZUIKitPlayerRef" @close="visible = false" />
		</div>
		<div class="pt-2">
			<div class="font-semibold">绑定设备：</div>
			<div class="pl-4">
				<div v-for="item in form?.airMonitorEquipmentList" :key="item.id" class="mb-4">
					<div>{{ item.name }}</div>
					<div>
						<span>经度：{{ item.longitude || '--' }}</span> <span class="pl-4">纬度：{{ item.latitude || '--' }}</span>
					</div>
					<div>{{ item.address }}</div>
				</div>
				<div v-if="!form?.airMonitorEquipmentList?.length" class="pl-4 text-info">未绑定设备</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import EZUIKitPlayer from './components/EZUIKitPlayer.vue';
import { getObj } from '/@/api/platform/basicVideoSurveillance';
import { useRoute } from 'vue-router';
import mittBus from '/@/utils/mitt';

const EZUIKitPlayerRef = ref();
const visible = ref(false);
const loading = ref(false);
const route = useRoute();
const form = reactive({
	airMonitorEquipmentList: [] as any,
});

const openDialog = (id: string) => {
	visible.value = true;
	loading.value = true;
	getObj(id)
		.then((res: any) => {
			console.log('res: ', res);
			Object.assign(form, res.data);
			EZUIKitPlayerRef.value?.initVideo({
				appKey: res.data.appKey,
				appSecret: res.data.appSecret,
				deviceSerial: res.data.deviceSerial,
			});
		})
		.finally(() => {
			loading.value = false;
		});
};
// 关闭前销毁
const handleClose = () => {
	refreshCurrentTagsView();
	EZUIKitPlayerRef.value?.destroyPlayer();
};
// 刷新当前 tagsView
const refreshCurrentTagsView = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
};
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped></style>
